<template lang="pug">
.list
  .list-buttn
    el-button(size="small" type="primary" @click="addCase") 添加案例
  .list-filter
    header-filter(:filter="filter")
  .list-body
    .list-handles
      el-button(name="primary" size="small" @click="bacthDelCase") 删除
    .list-table
      el-table(
        :header-cell-style="{ background: '#F3F3F3', fontSize: '14px', color: '#363636' }"
        style="width: 100%"
        :data="list"
        v-loading="loading"
        height="calc(100vh - 450px)"
        @selection-change="changeSelection"
        empty-text="未找到符合条件的内容"
      )
        el-table-column(type="selection" width="55" align="center")
        el-table-column(label="名称" prop="materialCaseInf.projectName")
        el-table-column(label="所属业态" prop="styleLabel")
        el-table-column(label="地址" prop="materialCaseInf.location")
        el-table-column(label="时间" prop="materialCaseInf.caseDate")
        el-table-column(label="状态" prop="materialCaseInf.caseDate")
          template(slot-scope="scope")
            .table-item-status(v-if="scope.row.materialCaseInf.reviewStatus == 1") 待审核
            .table-item-status(v-if="scope.row.materialCaseInf.reviewStatus == 2") 审核通过
            .table-item-status(v-if="scope.row.materialCaseInf.reviewStatus == 3") 审核不通过
        el-table-column(label="操作")
          template(slot-scope="scope")
            .table-item-handle(@click="editCase(scope.row)") 编辑
            .table-item-handle(@click="delCase(scope.row)") 删除
      .index-pagination
        .pagination-total 共 {{total}} 条
        .pagination-sizes 10 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        )
</template>

<script>
import headerFilter from '@/components/headerFilter'
import { getCaseList, deleteCase, getStyles } from 'api'
export default {
  name: 'caseList',
  components: {
    headerFilter
  },
  data () {
    return {
      filter: [
        [
          {
            name: '案例名称：',
            type: 'default',
            key: 'caseInfo',
            caseInfo: '',
          },
          {
            name: '案例所属业态：',
            type: 'select',
            key: 'styleId',
            styleId: '',
            handle: '',
            optLabel: 'styleName',
            optValue: 'styleId',
            options: []
          },
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: [],
      loading: true,
      page: 1,
      pageSize: 10,
      total: 0,
      styles: [],
      selection: []
    }
  },
  methods: {
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      this.$router.replace({ name: this.$route.name })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          if (v.key === 'styleId') v.options = this.styles
          v[v.key] = this.$route.query[v.key] || ''
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    delCase (row) {
      this.$confirm('是否要删除所选案例？', '案例删除').then(async () => {
        try {
          await this.$axios.post(deleteCase, { content: { materialCaseList: row.materialCaseInf.materialCaseId } })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    bacthDelCase () {
      if (!this.selection.length) {
        this.$message.error('请先选择要删除的案例！')
        return
      }
      this.$confirm('是否要删除所选案例？', '案例删除').then(async () => {
        try {
          let ids = this.selection.map(item => item.materialCaseInf.materialCaseId)
          await this.$axios.post(deleteCase, { content: { materialCaseList: ids.join(',') } })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    changeSelection (selection) {
      this.selection = selection
    },
    editCase (row) {
      this.$router.push({ name: 'caseEdit', params: { id: row.materialCaseInf.materialCaseId } })
    },
    addCase () {
      this.$router.push({ name: 'caseEdit' })
    },
    async getStyle () {
      try {
        const { ResultSet } = await this.$axios.post(getStyles)
        this.styles = ResultSet.userData.businessStyles
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        this.loading = true
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(getCaseList, { content: { ...query } })
        ResultSet.userData.materialCase.forEach(item => {
          item.styleLabel = item.style.join(',')
        })
        this.page = Number(this.$route.query.currentPage) || 1
        this.total = ResultSet.userData.totalSize
        this.list = ResultSet.userData.materialCase
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      vm.getList()
      await vm.getStyle()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
} 
</script>

<style lang="scss" scoped>
.list {
  padding: 0 32px;
}
.list-filter {
  padding: 32px 0 16px;
  margin-top: 24px;
  background: #fff;
  border-radius: 4px;
}
.list-body {
  margin-top: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-table {
  margin-top: 16px;
}
.table-item-handle {
  display: inline-block;
  padding: 0 8px;
  color: #FF2E42;
  cursor: pointer;
  line-height: 1;
  &:first-child {
    padding-left: 0;
    border-right: 1px solid #CBCBCB;
  }
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
</style>
